import React from 'react';
import { Select, Space, ConfigProvider } from 'antd';
import { GlobalOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';
import { motion } from 'framer-motion';
import { useThemeStore } from '../../stores/themeStore';
import { getTheme } from '../../theme/config';

const { Option } = Select;

interface LanguageSwitcherProps {
  size?: 'small' | 'middle' | 'large';
  showIcon?: boolean;
  variant?: 'default' | 'compact';
}

const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({
  size = 'middle',
  showIcon = true,
  variant = 'default'
}) => {
  const { i18n } = useTranslation();
  const { mode } = useThemeStore();
  const theme = getTheme(mode);

  const languages = [
    { code: 'zh-CN', name: '中文', flag: '🇨🇳' },
    { code: 'en-US', name: 'English', flag: '🇺🇸' }
  ];

  const handleLanguageChange = (languageCode: string) => {
    i18n.changeLanguage(languageCode);
  };

  const getCurrentLanguage = () => {
    return languages.find(lang => lang.code === i18n.language) || languages[0];
  };

  const dropdownStyle = {
    background: theme.dropdownBackground,
    backdropFilter: 'blur(20px)',
    borderRadius: '12px',
    border: `1px solid ${theme.dropdownBorderColor}`,
    boxShadow: `0 8px 32px ${theme.dropdownShadowColor}`,
    padding: '8px 0',
  };

  const selectStyle = {
    minWidth: variant === 'compact' ? 100 : 120,
    background: theme.inputBackground,
    border: `1px solid ${theme.inputBorderColor}`,
    borderRadius: '8px',
    color: theme.textPrimary,
  };

  return (
    <ConfigProvider
      theme={{
        components: {
          Select: {
            colorBgElevated: theme.dropdownBackground,
            colorText: theme.textPrimary,
            colorBorder: theme.dropdownBorderColor,
            borderRadius: 12,
            fontSize: 14,
          },
        },
      }}
    >
      <motion.div
        whileHover={{ scale: 1.05 }}
        whileTap={{ scale: 0.95 }}
      >
        <Select
          value={i18n.language}
          onChange={handleLanguageChange}
          size={size}
          style={selectStyle}
          suffixIcon={showIcon ? <GlobalOutlined style={{ color: theme.textSecondary }} /> : undefined}
          styles={{ popup: { root: dropdownStyle } }}
          classNames={{ popup: { root: "custom-language-dropdown" } }}
        >
          {languages.map((lang, index) => (
            <Option key={lang.code} value={lang.code}>
              <motion.div
                initial={{ opacity: 0, x: -10 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.3, delay: index * 0.1 }}
                style={{
                  padding: '8px 12px',
                  borderRadius: '6px',
                  transition: 'all 0.3s ease',
                }}
                whileHover={{
                  background: theme.hoverBackground,
                  x: 4
                }}
              >
                <Space>
                  <span style={{ fontSize: '16px' }}>{lang.flag}</span>
                  <span style={{ 
                    color: theme.textPrimary,
                    fontWeight: '500',
                    fontSize: '14px'
                  }}>
                    {lang.name}
                  </span>
                </Space>
              </motion.div>
            </Option>
          ))}
        </Select>
      </motion.div>
    </ConfigProvider>
  );
};

export default LanguageSwitcher;